<%@ page import="java.util.Map" %>
<%@ page import="java.util.List" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>确认订单</title>
    <link rel="stylesheet" href="../static/css/sureOrder.css">
    <script src="../static/js/jQuery_3.7.1.js"></script>
    <script src="../static/js/jquery-1.8.0.js"></script>
</head>
<body>
<div>
    <%
        HttpSession session1 = request.getSession();
        List<Map<String, Object>> orders = (List<Map<String, Object>>) session.getAttribute("orders");
    %>
    <!--头部-->
    <div class="top-01">
        <div class="top-02">
            <ul>
                <li><a><img src="../static/image/Mi01.png" height="82" width="123" alt="Image 1"/></a></li>
                <li><a style="width: 216px; height: 87px; display: inline-block"><img src="../static/image/yuan01.png" height="82" width="82" alt="Image 2"/></a>
                </li>
                <li class="search-container"></li>
                <li><a id="head01" href="zhiId"><img src="../static/image/download.webp" height="32" width="32" alt="Profile"/></a></li>
                <li id="img-01"><a href="findAllShopsServlet"><img src="../static/image/buyCarBlock.png" alt="Cart"/><span>购物车</span>
                </a></li>
            </ul>
        </div>
    </div>
    <div>确认订单</div>
    <div class="center">
        <div>
            <img src="../static/image/addressH.png" height="24" width="24"/>收货地址<span class="center-01">选择其他地址</span>
        </div>
        <c:forEach items="${addresses}" var="address">
            <div class="address">
                ${address.name}&nbsp;&nbsp;&nbsp;${address.phone}&nbsp;&nbsp;&nbsp;<span>${address.province}${address.city}${address.county}${address.street}</span>
            </div>
        </c:forEach>

    </div>
    <!--确认订单信息-->
    <div>
        <!--商品-->
        <div class="shop">
            <div>确认订单信息</div>
            <div class="center-02">
                <ul>
                    <li>商品信息</li>
                    <li>单价</li>
                    <li>数量</li>
                    <li>小计</li>
                </ul>
            </div>
            <c:forEach items="${orders}" var="order">
                <ul>
                    <li></li>
                    <li><img src="../static/image/one01.png" height="98" width="98"/></li>
                    <li>${order.name}</li>
                    <li>¥<input type="text" name="price"readonly>${order.price}</li>
                    <li>×<span>${order.amount}</span></li>
                    <li id="price0" style="color: #ff6d6d">¥${order.totalPrice}</li>
                </ul>
            </c:forEach>
            <div class="last">
                <div>
                    总计:￥
                    <span id="totalPrice">0.00</span>
                    <br>
                    <a href="zhiId">提交订单</a>
                </div>
            </div>


        </div>

    </div>

</div>
<%@include file="foot.html"%>
<!--选择收货地址-->
<div class="chooseAddress">
    <div>选择收货地址<span>×</span></div>
    <div>
        <ul>
            <c:forEach items="${addresses1}" var="addresses">
                <li>
                    <a href="#">
                        ${addresses.name}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;${addresses.phone}<br>
                        <span>${addresses.province}${addresses.city}${addresses.county}${addresses.street}</span>
                    </a>
                </li>

            </c:forEach>
        </ul>
    </div>
    <div class="addAddress"><a href="address.html">新增收货地址</a></div>
</div>
<script src="../static/js/sureOrder.js"></script>
<script>
    // 获取所有订单项
    const orders = document.querySelectorAll('.shop ul:not(:first-child)');
    let totalPrice = 0;

    orders.forEach(order => {
        // 获取每个订单项的小计
        const priceElement = order.querySelector('#price0');
        const price = parseFloat(priceElement.textContent.replace('¥', ''));
        totalPrice += price;
    });

    // 更新总计
    document.getElementById('totalPrice').textContent = totalPrice.toFixed(2);






</script>
</body>
</html>